<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        color: red;
        background-color: aqua;
    }

    img {
        width: 300px;
        height: 200px;
    }

    .active {
        background-color: red;
    }

    .aaa {
        background-color: blue;
        width: 100px;
        height: 100px;
    }

    .bbb {
        background-color: black;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <h1>click</h1>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btn3">按钮3</button>
    <button id="btn4">按钮4</button>
    <div class="title">haha</div>
    <input type="submit" value="提交">
    <img class="img1" src="./images/1.png" alt="">
    <img class="img2" src="./images/3.png" alt="">
    <button class="active">555</button>
    <button class="btn6">666</button>


    <script src="script/jquery.js"></script>
    <script>
        //获取节点$("选择器")   $是jQuery的简写
        $(".btn1").click(function () {
            console.log("hello world")
        })
        $(".btn2").click(function () {
            console.log("hello")
        })
        $(".btn3").click(function () {
            console.log("he")
        })
        $("#btn4").click(function () {
            console.log("h")
        })
        $("h1").click(function () {
            console.log("world")
        })
        $("div").click(function () {
            // console.log("haha")
            // var css1 = $("div").css()
            // console.log(css1)
            $("div").css({
                width: "1200px",
                height: "1200px",
                color: "blue",
            }
            )
        })
        var css1 = $(".title").css("height")
        console.log(css1)


        var txt = $(".title").text()  //获取元素文本
        console.log(txt)

        var val = $("input").val()
        $("input").click(function () {             //val()是input里的属性
            $("input").val("元素value属性改变")
        })
        var attr = $("img").attr("src")
        console.log(attr)
        $(".img1").click(function () {
            $(".img1").attr("src", `./images/2.png`)  //attr改变图片路径src
        })

        $(".img2").click(function () {
            $(this).remove();             //this就是指的是img2 不用加标点 切记
        })

        $(".active").click(function () {
            $(this).addClass("aaa");    //aaa是一种css风格，点击button，addClass添加一种css风格
        })

        $(".btn6").click(function () {
            $(this).toggleClass("bbb");    //bbb是一种css风格，点击btn6，toggleClass切换成另一种css风格
        })


    </script>
</body>

</html>